<template>
	<view class="tag" :style="{
		fontSize: size + 'px',
		background: background,
		color: color,
		marginRight:right+'px',
		marginLeft:left+'px',
		border: `1rpx solid ${borderColor}` 
	}">
		{{ text }}
	</view>
</template>

<script setup>
	import {
		defineProps
	} from 'vue';
	const props = defineProps({
		text: String,
		size: {
			type: Number,
			default: 12
		},
		background: {
			type: String,
			default: '#F2F3F5'
		},
		color: {
			type: String,
			default: "#86909C"
		},
		right: {
			type: Number,
			default: 12
		},
		left: {
			type: Number,
			default: 0
		},
		borderColor:{
			type: String,
			default: '#F2F3F5'
		}
	})
</script>

<style lang="scss" scoped>
	.tag {
		width: max-content;
		padding: 3px 6px;
		border-radius: 4px;
		font-size: 12px;
		
	}
</style>